<template>
  <span>
   <span @click="handExportBtn">
      <slot>
        <el-button type="success">
          导出
        </el-button>
    </slot>
   </span>
    <el-dialog :visible.sync="dialogFormVisible" title="导出文件为Excel">
      <el-form :model="form" class="azure-export-form">
        <el-form-item :label-width="formLabelWidth" label="导出文件名">
          <FilenameOption v-model="form.filename"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="表格自动宽度适应">
          <AutoWidthOption v-model="form.autoWidth"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="导出文件类型">
          <BookTypeOption v-model="form.bookType"/>
        </el-form-item>
      </el-form>

      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogFormVisible = false">取消导出</el-button>
        <el-button :loading="downloadLoading" @click="submitExport" type="primary">确定导出</el-button>
      </div>
    </el-dialog>
  </span>
</template>

<script>
  import FilenameOption from '@/views/excel/components/FilenameOption'
  import AutoWidthOption from '@/views/excel/components/AutoWidthOption'
  import BookTypeOption from '@/views/excel/components/BookTypeOption'
  import { dateFormat } from '@/utils/commons'

  export default {
    name: 'ExportFileButton',
    props: {
      columnDesObjs: {
        type: Array,
        require: true
      }
    },
    components: { BookTypeOption, AutoWidthOption, FilenameOption },
    data() {
      return {
        formLabelWidth: '170px',

        downloadLoading: false,
        form: {
          exportTotal: '',  //  导出的页数
          filename: '',
          autoWidth: true,
          bookType: 'xlsx'
        },
        dialogFormVisible: false
      }
    },
    methods: {
      handExportBtn() {
        console.log('btn')
        this.dialogFormVisible = true
      },

      submitExport() {
        const resolve = (data) => {
          this.handleDownload(data)
          this.downloadLoading = false
        }

        const reject = () => {
          this.$notify.warning({ title: '导出数据失败', message: '导出数据失败' })
          this.downloadLoading = false
        }

        this.downloadLoading = true
        this.$emit('export', { resolve, reject })
      },

      //  导出表格数据
      handleDownload(tableData) {
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = this.columnDesObjs.map(e => e.label)  //  中文名
          const filterVal = this.columnDesObjs.map(e => e.key)  //  英文名
          const data = this.formatJson(filterVal, this.filterValue(tableData))

          console.log('format => %o ',data)
          console.log('tHeader => %o ',tHeader)
          const { filename, bookType, autoWidth } = this.form
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename,
            bookType,
            autoWidth
          })
          this.dialogFormVisible = false
        }).catch((e) => {
          console.log(e)
        })
      },

      filterValue(list) {
        return list.map((row) => Object.keys(row).reduce((acc, key) => {
          this.columnDesObjs.map(descObj => {
            if (descObj.key === key) {
              if (descObj.filter) {
                acc[key] = descObj.filter(row[key])
              } else if (descObj.dateFormat) {
                acc[key] = dateFormat(row[key])
              }
            }
          })
          return acc
        }, { ...row }))
      },

      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          // if (j === 'timestamp') {
          //   return parseTime(v[j])
          // } else {
          return v[j]
          // }
        }))
      }
    }

  }
</script>

<style lang="scss">
  .azure-export-form {
    /deep/ .el-form-item {
      margin-bottom: 22px !important;
    }
  }

</style>
